<template>
	<view v-if="istrue" class="pos" style="overflow-y:scroll">
		<view class="t1 pos" :style="{'background-image': 'url('+coverimg+')'}">
			<view class="flex_between flex_items abs lj_style">
				<view class="flex_column" style="width:600rpx;">
					<text class="f32 bold" style="color: #fff;">{{Title}}</text>
					<view class="flex_start flex_items mt20">
						<text class="f26" style="color: #fff;">{{Abstract}}</text>
					</view>
				</view>
				<image @click="onFan" :src="fanyi" mode="widthFix" style="width: 52rpx;height: 50rpx;">
				</image>
			</view>
		</view>
		<!-- t2 -->
		<!-- v-if="BuyMask" -->
		<block v-if="BuyMask">
			<view v-if="current.src!=null" class="pos p20 flex_start flex_items"
				style="left:20rpx;width: calc(100% - 40rpx);height:160rpx;background: #fff;border-radius: 10rpx;box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0,0,0,0.1);top: 0;margin-top: 2%;">
				<WzsAudio v-if="istrue" :music="current.src" :title="Title" :rooms='room' :PlayID="playID"
					style="width: 100%;" :product="info.LinkUrl" @getIsFalse="getFalse"></WzsAudio>
			</view>
		</block>
		<view class="plr20 flex_column mb100">
			<view v-if="room==0" class="flex_start flex_items">
				<image class="mr20" :src="imgUrl+'tit.png'" mode="widthFix" style="width: 33rpx;height: 31rpx;"></image>
				<text class="bold f32">{{tt}}</text>
			</view>
			<view v-if="room==0" class="flex_start flex_items mt30">
				<image :src="lo" mode="" style="width: 19rpx;height: 26rpx;" class="mr20"></image>
				<text class="f24" style="color: #999;">{{info.Address}}</text>
			</view>
			<view v-if="room==0" class="mt30" style="width: 100%;height: 1rpx;background:#EDEDED;"></view>
			<view class="f30 mt30" style="color: #1a1a1a;line-height: 48rpx;" v-html="intr"></view>
		</view>
	</view>
</template>

<script>
	import {
		GetArticledetail
	} from '@/api/api.js'
	import {
		getGoodsDetail,
	} from '@/api/mall.js'
	import {
		getHomeMsg,
		getweixinUserInfo,
	} from '@/api/homePage.js'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		floatMul
	} from '@/utils/tools.js'
	import WzsAudio from '@/components/audios/index.vue'
	export default {
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
		},
		data() {
			return {
				imgUrl: "",
				istrue: false,
				CustomBar: "",
				info: {},
				Title: "",
				Abstract: "",
				current: {
					poster: '',
					name: '',
					author: '',
					src: '',
				},
				Address: "",
				intr: "",
				audioAction: {
					method: 'pause'
				},
				tt: "景点介绍",
				id: "",
				coverimg: "",
				isfan: false,
				isblue: 0,
				lo: "",
				fanyi: "",
				// backimg: require('../../static/yqimg/back.jpg'),
				room: 0,
				playID: 0,
				chese: 'CN',
				shopDetail: '', //商品详情数据
				BuyMask: false,
			}
		},
		components: {
			WzsAudio
		},
		onLoad(options) {
			if (options.id) {
				// this.checkLogin();
				this.getShenHeData();
				this.imgUrl = this.$category.api.imgUrl
				this.id = options.id
				if (options.room) {
					this.room = 1
				}
				if (options.title) {
					this.tt = options.title
				}
				if (options.chese) {
					this.chese = options.chese
				}
				if (options.isblue) {
					console.log('====音频====')
					console.log(JSON.parse(options.infos))
					this.isblue = 1
					this.info = JSON.parse(options.infos)
					if (this.chese == "CN") {
						this.current.src = JSON.parse(options.infos).ChineseVoice
					} else {
						this.current.src = JSON.parse(options.infos).AttachmentDoc
					}

				}
				this.getdetail()
			} else {
				this.imgUrl = this.$category.api.imgUrl
				const urlStr = decodeURIComponent(options.q)
				let url = ''
				if (typeof urlStr == "undefined") {
					url = decodeURI(location.search); //获取url中"?"符后的字符串
				} else {
					url = "?" + urlStr.split("?")[1];
				}
				let params = {};
				if (url.indexOf("?") != -1) {
					let str = url.substr(1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						params[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				}
				if (params.Id) {
					this.id = params.Id;
					this.checkLogin();
					if (params.room) {
						this.room = 1
					}
					if (params.title) {
						this.tt = params.title
					}
					if (params.chese) {
						this.chese = params.chese
					}
					if (params.isblue) {
						console.log('====音频====')
						console.log(JSON.parse(options.infos))
						this.isblue = 1
						this.info = JSON.parse(options.infos)
						if (this.chese == "CN") {
							this.current.src = JSON.parse(options.infos).ChineseVoice
						} else {
							this.current.src = JSON.parse(options.infos).AttachmentDoc
						}
					
					}
				}
			}
			uni.getSystemInfo({
				success: e => {
					let capsule = uni.getMenuButtonBoundingClientRect();
					if (capsule) {
						this.CustomBar = ((capsule.bottom + capsule.top - e.statusBarHeight) / 2) + 'px';
					} else {
						this.CustomBar = ((e.statusBarHeight + 50) / 2) + 'px';;
					}
				}
			})
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			uni.getLocation({
				type: "wgs84", //返回可以用于 wx.openLocation 的经纬度
				success(res) {
					const lat = res.latitude;
					const lng = res.longitude;
				}
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$category.appName, //分享的名称
				path: '/pages/YangquanTour/tourdetail',
				mpId: this.$category.appid //此处配置微信小程序的AppId
			}
		},
		methods: {
			async getUserMsg(code) {
				console.log(code)
				try {
					const {
						ErrorCode,
						Msg,
						Data
					} = await getweixinUserInfo(
						code
					);
					//const Data = config.testUserInfo.Data;
					if (Data) {
						uni.setStorageSync('token', Data.user_token);
						uni.setStorageSync('userInfo', Data.wxUser);
						uni.setStorageSync('userMemberTags', Data.userMemberTags)
						this.getShenHeData();
						this.getdetail()
					} else {
						this.$api.msg('获取token失败');
					}
				} catch (e) {

				}
			},
			//验证登录
			async checkLogin() {
				const token = uni.getStorageSync('token');
				console.log(token)
				//if (token == '' || token == null){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log(infoRes)
								var Data = {
									appid: uni.getAccountInfoSync().miniProgram.appId,
									userInfo: infoRes.userInfo,
									encryptedData: infoRes.encryptedData,
									iv: infoRes.iv,
									rescode: loginRes.code
								}
								that.getUserMsg(Data)
							}
						});
					}
				});
				//	}
			},
			//获取站点信息
			async getShenHeData() {
				try {
					const {
						Data
					} = await getHomeMsg({
						ParentId: 144
					})
					console.log("获取审核")
					console.log(Data)
					Data.forEach(con => {
						if (con.Name == "收费审核") {
							if (con.LinkUrl == "审核中") {
								this.BuyMask = false;
							} else {
								this.BuyMask = true;
							}
						}
					})
				} catch (e) {
					console.log(e)
				}
			},
			...mapMutations(['setGoodsInfo', 'setGoodsInfoList']),
			async lodaData(e) {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					const {
						Data
					} = await getGoodsDetail({
						Id: e
					})
					this.shopDetail = Data;
					console.log(this.shopDetail)
					uni.hideLoading();
				} catch (e) {
					console.log(e)
				}
			},
			getFalse(e) {
				this.lodaData(e)
				console.log(e)
				let that = this;
				let item = {
					Id: e,
					Type: 14
				}
				uni.showModal({
					title: '提示',
					content: '当前景点语音讲解服务暂未购买，是否前往购买~',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							console.log(that.shopDetail)
							let data = {
								...that.shopDetail,
								ProductSpecId: that.shopDetail.ProductSpecList[0].ProductAttributesList[0]
									.ProductSpecId,
								ProductAttributeName: '条',
								number: 1,
								ProductId: that.shopDetail.ProductSpecList[0].ProductId,
							}
							const GoodsInfoList = [{
								BusinessId: that.shopDetail.BusinessId,
								BusinessName: that.shopDetail.BusinessModel.CompanyName || that
									.shopDetail.Name,
								OrderRemak: '',
								goodsAmount: that.shopDetail.ProductSpecList[0].Price,
								ProductInfo: [{
									Num: data.number,
									...data
								}],
								glist: [{
									Num: data.number,
									Price: that.shopDetail.ProductSpecList[0].Price,
									...data
								}]
							}]
							that.setGoodsInfoList(GoodsInfoList)
							uni.navigateTo({
								url: '/mall_subpages/create-order/create-order?id=' + that.shopDetail
									.BusinessId + '&type=' + that.shopDetail.Type
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getdetail(aa) {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isblue == 1) {
					this.coverimg = this.info.CoverImg
					this.current.poster = this.info.CoverImg
					this.istrue = true
					uni.hideLoading()
					return
				}
				GetArticledetail({
					Id: this.id,
				}).then(res => {
					console.log(res)
					this.coverimg = res.Data.CoverImg
					this.info = res.Data
					this.current.poster = res.Data.CoverImg
					if (!aa) {
						this.current.author = res.Data.Title
						if (res.Data.ChineseSubstance != null) {
							this.intr = res.Data.ChineseSubstance.replace(/\<p/gi, '<p class="ppp"')
						}
						this.Title = res.Data.Title
						this.Abstract = res.Data.Abstract
						if (this.chese == "CN") {
							this.current.src = res.Data.ChineseVoice
						} else {
							this.current.src = res.Data.AttachmentDoc
						}
						this.playID = res.Data.Id
					} else {
						// uni.showLoading({
						// 	title: '翻译中...'
						// })
						// if (this.isfan == false) {
						// 	this.isfan = true
						// 	this.intr = this.info.OtherLanguageInfo[0].Substance
						// 	this.current.src = this.info.OtherLanguageInfo[0].AudioFile
						// 	this.Abstract = this.info.OtherLanguageInfo[0].Abstract
						// 	this.Title = this.info.OtherLanguageInfo[0].Title
						// 	this.tt = 'Introduction to Scenic Spots'
						// } else {
						// 	this.isfan = false
						// 	this.Title = this.info.Title
						// 	this.intr = this.info.ChineseSubstance
						// 	this.Abstract = this.info.Abstract
						// 	this.current.src = this.info.ChineseVoice
						// 	this.playID = res.Data.Id
						// 	this.tt = '景点介绍'
						// }
					}
					this.istrue = true
					uni.hideLoading()
				})
			},
			golocal() {
				let that = this
				uni.openLocation({
					latitude: Number(that.info.Lng), //目标纬度
					longitude: Number(that.info.Lat), //目标经度
					name: that.info.Title, //名称
					scale: 28
				});
			},
			onFan() {
				console.log(this.info)
				if (this.info.AttachmentDoc == null) {
					this.$api.msg('当前景点暂无英文讲解');
				} else {
					if (this.isfan) {
						this.current.src = this.info.ChineseVoice;
						this.intr = this.info.ChineseSubstance.replace(/\<p/gi, '<p class="ppp"')
						this.isfan = false;
					} else {
						this.current.src = this.info.AttachmentDoc;
						this.intr = this.info.OtherLanguageInfo[0].Substance;
						this.isfan = true;
					}
				}
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style>
	.t1 {
		/* background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F84654845-ef82-4e55-b0f1-508fb7beb500%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681483872&t=ab224d3421407d1f3a07158625909718')no-repeat; */
		background-size: 100% 100%;
		height: 500rpx;
	}

	button::after {
		border: none !important;
	}

	.ppp {
		font-weight: 400 !important;
		color: #454242 !important;
		line-height: 58rpx !important;
		font-size: 32rpx !important;
	}

	.lj_style {
		/* background: rgba(000, 000, 000, 0.6); */
		bottom: 0;
		width: calc(100% - 40rpx);
		padding: 3% 2%;
		width: 100%;
	}
</style>